<template>
  <div class="parent">
    <Headers :title="title" />
    <div class="main">
      <div v-if="flag" class="content">
        <div class="bgW">
          <div class="top">
            <h2 class="title">空气源热泵中的几P说的是什么？</h2>
          </div>
          <div class="time">
            <span class="name">克罗旭 2019-01-07 16:21</span>
            <span class="name"></span>
          </div>
          <div class="direction">
            <span class="directionText">经常听人家说的几匹几匹，这事什么意思啊，这个和我们普通家用电器所说的几匹是一个意思吗？</span>
          </div>
          <div class="picList">
            <ul class="list">
              <li class="listItem">
                <img src="../../assets/img/u=2302199541,2081180038&fm=26&gp=0.jpg" alt="" class="img">
              </li>
            </ul>
          </div>
        </div>
        <div class="message">
          <span class="name">精选答案</span>
          <span class="name">回答</span>
        </div>
        <div class="msgContent">
          <div class="msgTop">
            <div class="left">
              <img src="../../assets/img/hP.jpg" alt="" class="img">
            </div>
            <div class="right">
              <div class="rightTop">
                <span class="title">xiaohan1038</span>
                <span class="icon"><i class="icons iconfont icon-dianzan "></i> 238</span>
              </div>
              <div>
                <span class="cont">几匹是指的热交换功率，不是用电功率哈。可以百度什么是空调的匹，以及能效比。</span>
              </div>
            </div>
          </div>
          <div class="msgBtn">
            <div>
              <span class="time">2019-01-07 17:12</span>
            </div>
            <div class="answer">
              <span class="answerName">1回复</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="content">
        <div class="bgW">
          <div class="top">
            <h2 class="title">关于煤改电请详细说明一下！谢谢</h2>
          </div>
          <div class="time">
            <span class="name">张志和0101 2018-12-21 16:21</span>
            <span class="name"></span>
          </div>
          <div class="direction">
            <span class="directionText">北京的煤改电，我是租住的北京的平房，那么我是如何缴纳电费的？有说只要优惠时段所有电器都是3毛，还有说优惠时段需要正常缴纳电费，供暖结束后由房主去领补贴，到底是怎么回事？有这个经验的详细说明，请别乱说，谢谢！！</span>
          </div>
          <div class="picList">
            <ul class="list">
              <li class="listItem">
                <img src="../../assets/img/timg.jpeg" alt="" class="img">
              </li>
            </ul>
          </div>
        </div>
        <div class="message">
          <span class="name">精选答案</span>
          <span class="name">回答</span>
        </div>
        <div class="msgContent">
          <div class="msgTop">
            <div class="left">
              <img src="../../assets/img/pp.jpg" alt="" class="img">
            </div>
            <div class="right">
              <div class="rightTop">
                <span class="title">zhyfcs008</span>
                <span class="icon"><i class="icons iconfont icon-dianzan "></i> 238</span>
              </div>
              <div>
                <span class="cont">我也住过那里 ，当初问的邻居也是北京人，煤改电低谷电是实时结算的 ，。电话联系市民热线，也是这样讲的，具体得联系住的供电局 ，这个是最准确的。昨天我也咨询了，这个得和供电局电话联系，确认你的煤改电的电表是智能的，还是网络式的 ，我那块就属于网络的 ，可以实时结算的</span>
              </div>
            </div>
          </div>
          <div class="msgBtn">
            <div>
              <span class="time">2018-12-07 16:45</span>
            </div>
            <div class="answer">
              <span class="answerName">1回复</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Headers from '@/components/header-return'
export default {
  name: 'picDtetail',
  data () {
    return {
      title: '详情',
      flag: false
    }
  },
  components: {
    Headers
  },
  created () {
    if (this.$route.query.id === '1') {
      this.flag = true
    } else if (this.$route.query.id === '2') {
      this.flag = false
    }
  }
}
</script>
<style scoped lang="scss">
.parent{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
}
.main{
  width: 100%;
  overflow: auto;
}
.bgW{
  width: 100%;
  background: #fff;
  padding: 0 15px;
}
.content{
  width: 100%;
  padding-bottom: 30px;
  .top{
    width: 100%;
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .title{
      font-size:20px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
  }
  .time{
    width: 100%;
    height: 26px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .name{
      font-size:12px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(159,158,168,1);
    }
  }
  .direction{
    width: 100%;
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .directionText{
      font-size:16px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(102,102,102,1);
    }
  }
}
.list{
  width: 100%;
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .listItem{
    width: 50%;
    height: 120px;
    border: 1px solid rgba(151,151,151,1);
    margin-bottom: 6px;
    .img{
      width: 100%;
      height: 100%;
    }
  }
}
.message{
  width: 100%;
  height: 30px;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  .name{
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(59,139,251,1);
  }
}
.msgContent{
  width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .msgTop{
    width: 100%;
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    .left{
      width: 30px;
      height: 30px;
      border-radius:100%;
      margin-right: 10px;
      margin-top: 6px;
      .img{
        width: 100%;
        height: 100%;
        border-radius:100%;
      }
    }
    .right{
      width: 90%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .rightTop{
        width: 100%;
        height: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size:12px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(102,102,102,1);
        }
        .icon{
          font-size:12px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(59,139,251,1);
          .icons{
            font-size: 10px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(59,139,251,1);
          }
        }
      }
      .cont{
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
    }
  }
  .msgBtn{
    width: 100%;
    height: 25px;
    padding-left: 38px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .time{
      font-size:12px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(102,102,102,1);
      padding-right: 10px;
    }
    .answer{
      width: 45px;
      height: 16px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background:rgba(216,216,216,1);
      border-radius: 8px;
      .answerName{
        font-size:12px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
      }
    }
  }
}
.btm{
  width: 100%;
}
</style>
